<template>
    <div class="w750 white-bg">
        <div class="withdrawalResult">
            <div class="result">
                <!-- <p class="icon">
                    <van-icon name="success" size="28" color="#4fc08d" />
                </p> -->
                <van-icon :name="result.iconType" size="40" :color="result.color" />
                <p class="result-text mt-10">{{ result.text }}</p>
                <p class="tips mt-10">{{ result.msg }}</p>
            </div>

            <div class="result-msg">
                <p class="item">
                    <span class="item-left">提现单号</span>
                    <span class="item-right">{{ result.withdrawSn }}</span>
                </p>
                <p class="item">
                    <span class="item-left">提现金额</span>
                    <span class="item-right">￥{{ Money(result.amount)[0] }}.{{ Money(result.amount)[1] }}</span>
                </p>

                <p class="item">
                    <span class="item-left">实际到账金额(元)</span>
                    <span class="item-right" v-if="result.actualAmount">
                        ￥{{ Money(result.actualAmount)[0] }}.{{ Money(result.actualAmount)[1] }}
                    </span>
                    <span class="item-right" v-else>￥{{ Money(result.amount)[0] }}.{{ Money(result.amount)[1] }}</span>
                </p>
                <p class="item">
                    <span class="item-left">手续费(元)</span>
                    <span class="item-right">￥{{ Money(result.platformServiceCharge)[0] }}.{{ Money(result.platformServiceCharge)[1] }}</span>
                </p>
                <p class="item" v-if="result.platformWithdrawalCharge">
                    <span class="item-left">提现费率</span>
                    <span class="item-right">{{ Money(result.platformWithdrawalCharge)[0] }}.{{ Money(result.platformWithdrawalCharge)[1] }}%</span>
                </p>

                <!-- <p class="item" v-if="result.thirdServiceCharge">
                    <span class="item-left">手续费</span>
                    <span class="item-right">￥{{ Money(result.thirdServiceCharge)[0] }}.{{ Money(result.thirdServiceCharge)[1] }}</span>
                </p> -->
                <p class="item">
                    <span class="item-left">到账账号</span>
                    <span class="item-right">
                        {{
                            result.receiverAccountType == 'BANK_CARD'
                                ? result.bankName
                                : result.ownerName
                                ? `微信零钱 （${result.ownerName}）`
                                : '微信零钱'
                        }}
                        <template v-if="result.receiverAccountType == 'BANK_CARD'">(尾号 {{ result.receiverAccountNumber | strEndFour }})</template>
                    </span>
                </p>
                <p class="item">
                    <span class="item-left">发起时间</span>
                    <span class="item-right">{{ result.applyTime | dateformat('YYYY/MM/DD HH:mm:ss') }}</span>
                </p>
                <p class="item" v-if="result.arrivalTime">
                    <span class="item-left">到账时间</span>
                    <span class="item-right">{{ result.arrivalTime | dateformat('YYYY/MM/DD HH:mm:ss') }}</span>
                </p>

                <p class="item" v-if="result.applyNote">
                    <span class="item-left">申请备注</span>
                    <span class="item-right">{{ result.applyNote }}</span>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
import cash from 'utils/tool'
import { getWithdrawDetail, integralWithdrawDetail } from 'api/extensionApi'
export default {
    data() {
        return {
            Money: cash, //价格转换
            result: {}
        }
    },
    mounted() {
        const apiType = this.$route.query.source == 'integral' ? integralWithdrawDetail : getWithdrawDetail

        apiType({ withdrawSn: this.$route.query.withdrawSn }).then((res) => {
            if (res.status != 1) {
                this.$toast(res.msg)
                return
            }

            const statusMap = (status) =>
                ({
                    50: '提现成功',
                    '-2': '提现关闭',
                    '-1': '提现异常'
                }[status] || '处理中')

            const iconType = (status) =>
                ({
                    50: 'passed',
                    '-2': 'close',
                    '-1': 'warning-o'
                }[status] || 'clock-o')

            const color = (status) =>
                ({
                    50: '#4fc08d',
                    '-2': '#f56c6c',
                    '-1': '#f56c6c'
                }[status] || '#67c23a')

            res.result.text = statusMap(res.result.status)
            res.result.iconType = iconType(res.result.status)
            res.result.color = color(res.result.status)

            let msg = '' //提示信息

            // 提现状态[-2:提现关闭,-1:提现异常,10:待审核,20:待支付,30:支付处理中,50:提现完成]
            if (res.result.status == 10 || res.result.status == 20 || res.result.status == 30) {
                msg = res.result.receiverAccountType == 'BANK_CARD' ? '预计1-3个工作日到账' : '预计3-5个工作日到账'
            }

            if (res.result.status == 50) {
                msg = res.result.receiverAccountType == 'BANK_CARD' ? '已到账银行卡' : '已到账微信钱包'
            }

            if (res.result.status == -2) {
                msg = res.result.operationNote
            }

            if (res.result.status == -1) {
                msg = res.result.errorMessage
            }

            // res.result.msg = msg
            this.result = { ...res.result, msg }
        })
    },
    methods: {}
}
</script>

<style lang="stylus" scoped>
.mt-10 {
    margin-top: 10px;
}
.result {
    display: flex;
    flex-flow: column;
    min-height: 150px;
    justify-content: center;
    align-items: center;
    .icon {
        display: flex;
        flex-flow: column;
        width: 50px;
        height: 50px;
        border: 1px solid #4fc08d;
        border-radius: 50%;
        justify-content: center;
        align-content: center;
        text-align: center;
    }
    .tips {
        color: #999;
        font-size: 12px;
        max-width: 300px;
        line-height: 20px;

    }

}

.result-msg {
    padding: 0 10px;
    margin-top: 20px;
    .item {
        padding: 10px 0;
        display: flex;
        border-bottom: 1px solid #f8f8f8;
        align-items: center;
        .item-left {
            font-size: 14px;
        }
        .item-right {
            margin-left: auto;
            color: #999;
            font-size: 12px;
            font-family: arial;
            vertical-align: middle;
        }
    }
}
</style>
